<template>
    <div id="myChart"></div>
</template>

<script>
import { defineComponent, onMounted, getCurrentInstance, nextTick } from 'vue'
import { allData } from '@/echarts/home/index'
import { getContrastData } from '@/api/home/index'

export default defineComponent({
    setup() {
        const { proxy } = getCurrentInstance()
        onMounted(() => {
        })

        // 折线图
        getContrastData().then(res => {
            let calculateData = res.data.result[0].data.map(el => {
                return el.data
            })
            let reality = res.data.result[1].data.map(el => {
                return el.data
            })
            // 推迟执行   解决宽度问题
            nextTick(() => {
                getData(calculateData, reality)
            })
        })
        const getData = (calculateData, reality) => {
            allData.series[0].data = reality
            allData.series[1].data = calculateData
            let myChart = proxy.$echarts.init(document.getElementById('myChart'))
            myChart.setOption(allData)
        }
        return {
            getData
        }
    },
})
</script>

<style lang="scss" scoped>
#myChart{
    width: 100%;
    height: 300px;
}
</style>
